<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Online Planner - your best choice!</title>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../ext/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="../ext/examples/planner/forms.css"/>
<link rel="stylesheet" type="text/css" href="../ext/examples/shared/examples.css"/>

<script type="text/javascript" src="../ext/examples/planner/Portal.js"></script>
<script type="text/javascript" src="../ext/examples/planner/PortalColumn.js"></script>
<script type="text/javascript" src="../ext/examples/planner/Portlet.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/examples/planner/portal.css" />

<style type="text/css">
#title{
    background: #7F99BE url(../ext/examples/planner/images/layout-browser-hd-bg.gif) repeat-x center;
    font-size: 23px;
    color: #fff;
    font-weight: normal;
    padding: 0px 10px;
}
html,body {
	font: normal 12px verdana;
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow: hidden;
	height: 100%;
}

p {
	margin: 5px;
}

.settings {
	background-image: url(../ext/examples/shared/icons/fam/folder_wrench.png);
}

.nav {
	background-image: url(../ext/examples/shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
    Ext.onReady(function(){

        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    var tools = [{
        id:'left',
        handler: function(){
            Ext.Msg.alert('Message', 'Do you want to go before?');
        }
    },{
        id:'right',
	    handler: function(){
	        Ext.Msg.alert('Message', 'Do you wanna go after?');
	    }
  		// handler: function(e, target, panel){
        //    panel.ownerCt.remove(panel, true); }
	}];
    
       var viewport = new Ext.Viewport({
            layout:'border',
            items:[
                new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'title',
                    height:32
                }),{
                    region:'south',
                    contentEl: 'account',
                    split:true,
                    height: 100,
                    minSize: 100,
                    maxSize: 200,
                    collapsible: true,
                    title:'South',
                    margins:'0 0 0 0'
                }, {
                    region:'west',
                    id:'west-panel',
                    title:'Weekly Compas',
                    split:true,
                    width: 215,
                    minSize: 175,
                    maxSize: 535,
                    collapsible: true,
                    margins:'3 3 0 3',
                    layout:'accordion',
                    layoutConfig:{
                        animate:true
                    },
                    items: [{
                        contentEl: 'week',
                        title:'Task & Schedule',
                        iconCls:'nav',
                        border:false
                    },
                        //title:'Instant memo',
                        //html:'<p>Some settings in here.</p>',
                        //border:false,
                        //iconCls:'settings'
                        
                    	new Ext.FormPanel({
                            labelAlign: 'top',
                            title: 'Instant memo',
                            bodyStyle:'padding:1px 1px 1px 1px',
                            layout:'fit',
                            items: [{
                                xtype:'htmleditor',
                                id:'bio',
                                fieldLabel:'Biography',
                                anchor:'98%'
                            }]
                        })
                        
                    ]
                },
                new Ext.TabPanel({
                    region:'center',
                    deferredRender:false,
                    activeTab:0,
					margins:'3 3 0 0',


                    items:[{
                        title: 'Monthly Plan',
                        closable:false,
                        autoScroll:true,
                        layout:'fit',
                        items:[{
                            xtype:'portal',
                            region:'center',
                            margins:'0 0 0 3',
                            items:[{
                                columnWidth:.50,
                                style:'padding:5px 5px 5px 5px',
                                items:[{
                       				contentEl:'mtask',
                                    title: 'Your Tasks',
                                    tools: tools
                                },{
                                    title: 'Your Schedules',
                                    tools: tools,
                                    /* html 안됨 */
                                    // html: <p>sss</p>
                                    contentEl:'mschedule'
                                }]
                            },{
                                columnWidth:.50,
                                style:'padding:5px 5px 5px 5px',
                                items:[{
                                    title: 'Monthly Memo',
                                    tools: tools,
                                    contentEl:'mmemo'
                                }]
                            }]
                        }]
                    },{
                        title: 'Daily Plan',
                        autoScroll:true,
						layout:'fit',
                        items:[{
                            xtype:'portal',
                            region:'center',
                            margins:'0 0 0 5',
                            items:[{
                                columnWidth:.50,
                                style:'padding:5px 5px 5px 5px',
                                items:[{
                                    title: 'Your Tasks',
                                    tools: tools,
			                        contentEl:'dtask'
                                },{
                                    title: 'Your Schedules',
                                    tools: tools,
                                    contentEl:'dschedule'
                                }]
                            },{
                                columnWidth:.50,
                                style:'padding:5px 5px 5px 5px',
                                items:[{
                                    title: 'Daily Memo',
                                    tools: tools,
                                    contentEl:'dmemo'
                                },{
                                    title: 'Expense',
                                    tools: tools,
                                    contentEl:'expense'
                                }]
                            }]
                        }]
                    }]





                    
                })
             ]
        });
       	/* 글씨 클릭하면 창닫게가능.. 그냥 재밌는 기교
        Ext.get("hideit").on('click', function() {
           var w = Ext.getCmp('west-panel');
           w.collapsed ? w.expand() : w.collapse(); 
        });
       */
    });
</script>
</head>
<body>
<script type="text/javascript" src="../ext/examples/shared/examples.js"></script>

<div id="week">
	<p>일주일 기준</p>
	<p>*업무</p>
	<p>*스케줄</p>
</div>


<div id="mtask">
	<p>한달간의</p>
	<p>업무</p>
</div>
<div id="mschedule">
	<p>한달간의</p>
	<p>일정</p>
</div>
<div id="mmemo">
	<p>한달간의</p>
	<p>메모 혹은 목표</p>
</div>

<div id="dtask">
	<p>하루</p>
	<p>업무</p>
</div>
<div id="dschedule">
	<p>하루</p>
	<p>일정</p>
</div>
<div id="dmemo">
	<p>하루</p>
	<p>메모 혹은 일기</p>
</div>
<div id="expense">
	<p>하루</p>
	<p>지출내역</p>
</div>

<div id="title">
	<p>Online Planner</p>
</div>

<div id="account">
	<p>로그인/로그아웃 login.plan/logout.plan </p>
	<p>회원가입/탈퇴 join.plan/quit.plan </p>
</div>
<div id="props-panel"
	style="width: 200px; height: 200px; overflow: hidden;"></div>

</body>
</html>